<template>
    <div class="upload-file">
        <el-upload
            ref="upload"
            :action="uploadFileUrl"
            :on-remove="handleRemove"
            :limit="limit"
            :on-success="handleSuccess"
            :file-list="fileList"
            :auto-upload="true"
            :on-exceed="handleExceed"
            :before-upload="beforeUpload"
            multiple>
            <el-button slot="trigger" type="primary" :size="btnSize" v-no-more-click:3000>{{btnText}}</el-button>
            <div slot="tip" class="el-upload__tip" style="margin-top: 5px;">只能上传 {{fileLimit}} 文件，且不超过10M</div>
        </el-upload>
    </div>
</template>

<script>
export default {
    data() {
        return {
            fileList: [],
            uploadFileUrl: global.baseurl + '/api/upload/file',
        }
    },
    props: {
        rule: {},
        limit: {
            type: Number,
            default: 3
        },
        btnSize: {
            type: String,
            default: 'small'
        },
        fileLimit: {
            type: String,
            default: 'docx/pdf'
        },
        btnText: {
            type: String,
            default: '选择文件'
        }
    },
    methods: {
        handleExceed(files, fileList) {
            this.$message.error(`最多上传${this.limit}个文件`);
        },
        handleRemove(file, fileList) {
            let that = this;
            //从服务器也删除此文件
            that.$axios.delete('/api/delete/file', {
                data: {
                    path: that.fileList[fileList.length]
                }
            })
            that.fileList.splice(fileList.length, 1)
            let data = {
                fileList: this.fileList,
                rule: this.rule
            }
            this.$emit('upChange', data)
        },
        handleSuccess(res, file, fileList) {
            let arr = []
            fileList.forEach(v => {
                arr.push(v)
            });
            this.fileList = arr
            let data = {
                fileList: this.fileList,
                rule: this.rule
            }
            this.$emit('upChange', data)
        },
        beforeUpload(file) {
            let that = this;
            let canUpload = true; //是否能够上传（布尔值）
            let type = file.name.substring(file.name.lastIndexOf('.') + 1)
            //不区分大小写
            let reg = /docx|pdf/i;
            if (this.fileLimit.indexOf('pdf') == -1) {
                reg = /docx/i
            }

            if (!reg.test(type)) {
                that.$message({
                    message: `文件格式只能是${this.fileLimit}`,
                    type: 'warning'
                });
                canUpload = false;
            }
            let size = file.size / 1024 / 1024;
            if (size > 100) {
                that.$message({
                    message: "文件大小不能超过100M",
                    type: 'warning'
                });
                canUpload = false;
            }
            return canUpload
        },
    }
}
</script>

<style lang="less" scoped>
.upload-file {
    /deep/.el-upload {
        &.el-upload--text {
            line-height: 20px;
        }

    }
    .el-upload__tip {
        line-height: 20px;
    }
    /deep/.el-upload-list__item:first-child {
        margin-top: 5px;
    }
}

</style>
